<template>
  <view class="chat-notice">
  	<view class="public-notice-card">
  		<view class="notice-tag">公告</view>
  		<view class="notice-title">{{ JSON.parse(detail.content).title }}</view>
  		<view class="notice-image">
  			<image src="@/static/chat/gonggao.png" mode="widthFix"></image>
  			<text class="image-text">{{ JSON.parse(detail.content).title }}</text>
  		</view>
  		<view class="notice-content">{{truncateValue(JSON.parse(detail.content).content, 4)}}</view>
  	</view>
  </view>
</template>

<script>
import { chatApi } from '@/apis/cloud/chat'

export default {
  name: 'ApplyItem',
  props: {
		detail: {
			type: Object,
			required: true
		},
  },
  data() {
		return {

		}
	},
	methods: {
		truncateValue(text, maxLines = 4) {
		  const lineCharCount = 19;
		  const maxLength = lineCharCount * maxLines;
		  if (text === null || text === undefined) return '';
		  const str = String(text);
		  if (str.length <= maxLength) return str;
		  return str.slice(0, maxLength) + '...';
		}
  }
};
</script>

<style lang="scss" scoped>
	@import "../../config/global.scss";
/* 通知消息样式 */
.public-notice-card {
  background: #c9e7ff;
  border-radius: 16rpx;
  width: 450rpx;
  margin: 8rpx auto;
  padding: 2rpx;
}
.notice-tag {
  color: #66a6ff;
  margin-bottom: 10rpx;
	padding-left: 10px;
}
.notice-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
	padding-left: 10px;
}

.notice-image {
  position: relative;
  margin-bottom: 15rpx;
}

.notice-image image {
  width: 100%;
  border-radius: 8rpx;
}
.image-text {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 36rpx;

}
.notice-content {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 20rpx;
  line-height: 40rpx;
	padding-left: 10px;
}
</style>
